function $(str) {
    return document.querySelector(str);
}
function format(str, dict) {
    for (var d in dict) {
        str = str.replace(new RegExp("{{" + d + "}}", 'g'), dict[d]);
    }
    return str;
}
function float(str) { return parseFloat(str); }
function ok() {
    var name=$('.name').value;
    var start_x = float($('.start-x').value);
    var start_y = float($('.start-y').value);
    var start_scale = float($('.start-scale').value);
    var start_rotate = float($('.start-rotate').value);
    var start_alpha = float($('.start-alpha').value);
    var end_x = float($('.end-x').value);
    var end_y = float($('.end-y').value);
    var end_scale = float($('.end-scale').value);
    var end_rotate = float($('.end-rotate').value);
    var end_alpha = float($('.end-alpha').value);
    var start_color=$('.start-color').value;
    var end_color=$('.end-color').value;
    var tf=$('.tf').value;
    var time=float($('.time').value);
    var is_infinite=$('.is_infinite').checked?'infinite':"1";
    var start_width=float($('.start-width').value);
    var start_height=float($('.start-height').value);
    var end_width=float($('.end-width').value);
    var end_height=float($('.end-height').value);

    var template="\
    \n\n\
    @keyframes animate-{{name}}{\n\
        0%{\n\
            transform:translate({{start_x}},{{start_y}}) scale({{start_scale}}) rotate({{start_rotate}});\n\
            {{start_color}}\n\
            {{start_width}}\n\
            {{start_height}}\n\
            opacity:{{start_alpha}};\n\
        }\n\
        100%{\n\
            transform:translate({{end_x}},{{end_y}}) scale({{end_scale}}) rotate({{end_rotate}});\n\
            {{end_color}}\n\
            {{start_width}}\n\
            {{start_height}}\n\
            opacity:{{end_alpha}};\n\
        }\n\
    }\n\
    .ppt-{{name}}{\n\
        animation-name:animate-{{name}};\n\
        animation-timing-function:{{tf}};\n\
        animation-duration:{{time}};\n\
        animation-iteration-count:{{is_infinite}};\n\
    }\n\
    ";
    var css=format(template,{
        name:name,
        start_x:start_x+"px",
        start_y:start_y+"px",
        start_scale:start_scale,
        start_rotate:start_rotate+"deg",
        start_color:"color:"+start_color+";",
        start_width:start_width?"width:"+start_width+"px;":"",
        start_height:start_height?"height"+start_height+"px;":"",
        start_alpha:start_alpha,
        end_x:end_x+"px",
        end_y:end_y+"px",
        end_scale:end_scale,
        end_rotate:end_rotate+"deg",
        end_color:"color:"+end_color+";",
        end_width:end_width?"width:"+end_width+"px;":"",
        end_height:end_height?"height"+end_height+"px;":"",
        end_alpha:end_alpha,
        tf:tf,
        time:time+"s",
        is_infinite:is_infinite
    });
    var nw=window.open('./show_css.html');
    addEventListener('message',(msg)=>{
        if(msg.data=='load'){
            nw.postMessage(css);
        }
    });
    addEventListener('message',(msg)=>{
        if(msg.data!='load'){
            window.opener.postMessage(name+'||'+msg.data);
            self.close();
        }
    });
}
